<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input v-model="searchForm.orderNo" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.status" placeholder="订单状态">
              <el-option label="全部" value></el-option>
              <el-option label="待付款" value="NOPAY"></el-option>
              <el-option label="待发货" value="NOSEND"></el-option>
              <el-option label="已发货" value="SENDED"></el-option>
              <el-option label="已收货" value="RECEIVED"></el-option>
              <el-option label="已关闭" value="CLOSEED"></el-option>
              <el-option label="已完成" value="DONE"></el-option>
              <el-option label="退货单" value="REFUND"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="orders" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" style="width: 20%"></el-table-column>
        <el-table-column prop="createtime" label="时间" style="width: 50%"></el-table-column>
         <el-table-column prop="buyerName" label="购买者名称" style="width: 50%"></el-table-column>
        <el-table-column prop="source" label="来源" style="width: 50%"></el-table-column>
        <el-table-column prop="cash" label="订单金额" style="width: 50%"></el-table-column>
        <el-table-column prop="orderStatus" label="状态" style="width: 50%">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus=='NOPAY'">1-待付款</span>
            <span v-else-if="scope.row.orderStatus=='NOSEND'">2-待发货</span>
            <span v-else-if="scope.row.orderStatus=='SENDED'">3-已发货</span>
            <span v-else-if="scope.row.orderStatus=='RECEIVED'">4-已收货</span>
            <span v-else-if="scope.row.orderStatus=='CLOSEED'">5-已关闭</span>
            <span v-else-if="scope.row.orderStatus=='DONE'">6-已完成</span>
            <span v-else-if="scope.row.orderStatus=='REFUND'">7-退货单</span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="edit(scope.row)">处理</el-button>
            <el-button v-if="scope.row.orderStatus!='NOPAY' && (scope.row.refundStatus!='ReMEd' && scope.row.refundStatus!='ReDone')" type="text" size="small" @click="refund(scope.row)">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:10px;">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagenow"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderList,orderRefound } from "@/libs/api.js";
export default {
  methods: {
    handleCurrentChange(p) {
      this.loadPage(p);
    },
    onSubmit() {
      this.pagenow = 1;
      this.loadPage();
    },
    loadPage() {
      var param = { pagesize: 10, pagenow: this.pagenow,"status":this.searchForm.status,"orderNo":this.searchForm.orderNo};
      orderList(param).then(res => {
        this.orders = res.rows;
        this.total = res.total;
      });
    },
    detail(row){
        this.$router.push({
          path: "/order/detail?id="+row.id
        });
    },
    refund(row){
      let param ={"id":row.id,"cash":row.cash};
       orderRefound(param).then(res => {
           this.$util.success("退款成功");
           row.orderStatus="REFUND",
           row.refundStatus="ReMEd"
      });
    }
  },

  mounted() {
    this.loadPage();
  },

  data() {
    return {
      orders: [],
      total: 0,
      pagenow: 1,
      pagesize: 10,
      searchForm: {
        orderNo: "",
        status: ""
      }
    };
  }
};
</script>